<template>
  <div class="app">
    <div class="hrad">
            <!-- 跳转 -->
            <van-icon name="arrow-left" class="fh" @click="fh" />
            <p @click="tocas" :style="color">完成</p>
        </div>
        <div class="subject">
            <h3>设置新密码
                </h3>
            <br>
            <div class="menu">
                <div class="menu_top">
                    <input type="password" class="password_1" placeholder="请输入密码" v-model="password_1" @input="tan">
                </div>
                <div class="menu_bottom">
                    <input type="password" class="password_2" placeholder="请再次输入密码" v-model="password_2" @input="tan">
                </div>
                <span id="sp">6-16位密码,同时包含字母和数字</span>
                <p style="color: red;" v-if="ti==1">两次密码不相同</p>

                <span class="sp_1">
                    
                </span>
                
            </div>
        </div>
  </div>
</template>

<script>
import hrad from '../../components/PressUndo.vue'
import {resetPassword} from "../../api/register"
export default {
    data() {
        return {
            ti:2,
            num : 1,
            password_1:"",
            password_2: "",
            color:"color:#A3A3A3"
        }
    },
    components: {
        hrad
    }
    ,
    methods: {
        //修改密码第二个框限制弹出
        fh() {
            console.log(32);
            this.$router.go(-1)
            //返回上一页

        },
        // 修改密码的完成按钮
        tocas() {
            if (this.password_1 == this.password_2) {
                this.ti=2
                resetPassword({
                uid: 1,
                 password:this.password_2,
            }).then((res) => {
                console.log(res);
            }).catch((rest) => {
                console.log(rest);
            })
            } else {
                this.ti=1
            }
        },
        //监听Password_2,与Password_1不相等时弹出提示
        tan() {
            if (this.password_1 == this.password_2) {
                this.ti = 2;
                this.color="color:red"
            } else if (this.password_2 == "" && this.password_1 !== "") {
                this.ti = 2
                this.color="color:#A3A3A3"
            }
            else {
                this.ti = 1
                this.color="color:#A3A3A3"                                                                                                                                                                                                                                                                                                                                                                                                                
            }
        }
    },
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}


.fh{ 
    line-height: 40px;
    font-size: 25px !important;  
    /* color: rgb(44, 44, 44); */
    background:transparent;
}
::-ms-reveal {
    display: none;
}
.subject h3 {
    text-align: center;
    color: rgb(0, 0, 0);
    font-weight: 500;
    letter-spacing: 1px;
}
.app{
    width: 100vw;
    height: 100vh;
    background: rgb(255, 255, 255);

}
#acco {
    height: 30px;
    width: 50px;
    display: inline-block;
    /* border: 1px solid red; */
    border-radius: 10px;
    line-height: 30px;
    box-sizing: border-box;
    text-align: center;
}


.hrad{
    width: 390px;
    height: 50px;
    box-sizing: border-box;
    padding: 10px 7px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    color: #a3a3a3;
    background:white ;
}

.hrad a {
    color: #000;
}

.hrad h3 {
    margin-left: 30px;
    display: inline-block;
    color: rgb(0, 0, 0);
    font-weight: 500;
    letter-spacing: 1px;
}

.menu {
    height: 200px;
    /* 表单的大小 */
    /* background-color: azure; */
    padding: 0 40px 0;
    position: relative;
}
.sp_0 {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    /* background-color: #e1e1e1; */
}


.menu_top {
    height: 26px;
    width: 100%;
    margin-bottom: 40px;
    border: 1px solid rgba(69, 68, 73, 0.1);
    position: relative;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
}

/* 请输入密码的样式 */
.password_1 {
    background-color: #ffffff;
    border: 0;
    background-color: transparent;
    outline: none;
}

.password_1 {
    border: 0;
    background-color: transparent;
    width: 220px;
    outline: none;
    line-height: 26px;
    position: absolute;
    top: 5px;
}

/* 请再次输入密码的样式 */
.menu_bottom {
    height: 30px;
    border: 1px solid rgba(69, 68, 73, 0.1);
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    margin-top: 10px;
    position: relative;
}

.password_2 {
    
    border: 0;
    background-color: transparent;
    width: 220px;
    outline: none;
    line-height: 26px;
    /* 密码框的颜色 */
    background-color: #ffffff;
    position: absolute;
    top: 0px;
}

#sp {
    font-size: 2px;
    color: #ffffff;
}

</style>